<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向绑定指令</title>
    <!--1、导入vue.js，在window全局中就有了vue的构造函数（就和导入jQuery，window全局就有$可以使用一样）-->
    <script src="../js/vue_2.7.8.js" ></script>
</head>
<body>

<!--2、写希望让vue控制的html区域-->
<div id="app">
    <p style="color: red">v-model简单使用</p>
    <p>hi,{{name}}</p>
    <input type="text" v-model="name"><span style="color: red">v-model双向绑定</span><br>
    <input type="text" :value="name"><span style="color: red">v-on单向绑定</span><br>

    <p style="color: red">v-model的修饰符使用</p>
    <input type="text" v-model.number="n1">+<input type="text" v-model.number="n2">=<span>{{n1+n2}}</span><span style="color: red">v-model.number修饰符使用</span><br>
    <input type="text" v-model="name" > <button @click="sub">submit</button>
</div>

</body>
</html>
<script>

    //3.创建vue对象，并渲染dom
    const vm = new Vue({
        //vue的固定写法，表示vue要控制的哪个dom；接收的是个选择器
        el:"#app",
        //data是要渲染的数据
        data:{
            name:'zhangsan',
            n1:1,
            n2:1
        },
        methods:{
            sub(){
                alert(`输入内容为：'${this.name}'`);
            }
        }
    });

</script>
